<!DOCTYPE html>
<html lang="en">

<head>
    <title>新增设备</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
    <link rel="stylesheet" href="../css/addEquipment.css">
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">{{pageTitle}}</div>
        </div>
        <div class="app_Steps">
            <div class="app_StepsItem">
                <div :class="[stepState ==1?'app_StepsItemActive':'']">1<span>基础信息</span></div>
            </div>
            <div class="app_StepsLine" :style="{width: stepsLineWidth+'px'}"></div>
            <div class="app_StepsItem">
                <div :class="[stepState ==2?'app_StepsItemActive':'']">2<span>设备参数</span></div>
            </div>
            <div class="app_StepsLine" :style="{width: stepsLineWidth+'px'}"></div>
            <div class="app_StepsItem">
                <div :class="[stepState ==3?'app_StepsItemActive':'']">3<span>厂商信息</span></div>
            </div>
        </div>
        <div class="app_Cont" v-show="stepState == 1">
            <div class="app_ContItem app_marginB">
                <div class="app_ContItem_label">设备名称<span>*</span></div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.deviceName" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">设备类型<span>*</span></div>
                <div class="app_ContItem_inp" @click="typeShow = true">
                    <div :style="{color:form.deviceType == '' ?'#D1D1D1':'#000'}">{{ form.deviceType || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">设备状态<span>*</span></div>
                <div class="app_ContItem_inp" @click="stateShow = true">
                    <div :style="{color:form.deviceState == '' ?'#D1D1D1':'#000'}">{{ form.deviceState || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">联网方式<span>*</span></div>
                <div class="app_ContItem_inp" @click="networkingShow = true">
                    <div :style="{color:form.networked == '' ?'#D1D1D1':'#000'}">{{ form.networked || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">接入协议<span>*</span></div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.access" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">所属泵房</div>
                <div class="app_ContItem_inp" @click="pumpShow = true">
                    <div :style="{color:form.peremptorily == '' ?'#D1D1D1':'#000'}">{{ form.peremptorily || '请选择'
                        }}<span class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">所在位置<span>*</span></div>
                <div class="app_ContItem_inp">
                    <div :style="{color:form.address == '' ?'#D1D1D1':'#000'}">{{ form.address || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContTitle">泵组</div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">泵组添加</div>
                <div class="app_ContItem_inp" @click="goaddPump">
                    <div :style="{color:form.pump.length == 0 ?'#D1D1D1':'#000'}">{{ form.pump.length || '去添加' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem2 ">
                <div class="app_ContItem2_title">附件上传</div>
                <div class="app_ContItem2_img">
                    <div class="imgItem">图片信息</div>
                    <div class="imgItem">图片信息</div>
                    <div class="imgItem">图片信息</div>
                    <div class="imgItem">图片信息</div>
                </div>
            </div>
        </div>
        <div class="app_Cont" v-show="stepState == 2">
            <div class="app_ContItem app_marginB">
                <div class="app_ContItem_label">设备功率</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.devicePower" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">型号/规格</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.specification" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">最大承受压力</div>
                <div class="app_ContItem_inp">
                    <input type="text" placeholder="请输入" v-model="form.maximum">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">电压</div>
                <div class="app_ContItem_inp">
                    <input type="text" placeholder="请输入" v-model="form.voltage">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">运行方式</div>
                <div class="app_ContItem_inp" @click="runShow = true">
                    <div :style="{color:form.explicitly == '' ?'#D1D1D1':'#000'}">{{ form.explicitly || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">额定容量</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.rated" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">额定输出功率</div>
                <div class="app_ContItem_inp">
                    <input type="text" placeholder="请输入" v-model="form.higher_powered">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">品牌</div>
                <div class="app_ContItem_inp" @click="brandShow = true">
                    <div :style="{color:form.brand == '' ?'#D1D1D1':'#000'}">{{ form.brand || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
        </div>
        <div class="app_Cont" v-show="stepState == 3">
            <div class="app_ContItem app_marginB">
                <div class="app_ContItem_label">设备厂商</div>
                <div class="app_ContItem_inp" @click="firmShow = true">
                    <div :style="{color:form.equipment == '' ?'#D1D1D1':'#000'}">{{ form.equipment || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">质保期</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.warranty" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">采购时间</div>
                <div class="app_ContItem_inp" @click="isVisible = true">
                    <div :style="{color:form.time == '' ?'#D1D1D1':'#000'}">{{ form.time || '请选择' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">采购价格</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.purchased" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">联系人</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.contactName" placeholder="请输入">
                </div>
            </div>
            <div class="app_ContItem">
                <div class="app_ContItem_label">联系电话</div>
                <div class="app_ContItem_inp">
                    <input type="text" v-model="form.contactPhone" placeholder="请输入">
                </div>
            </div>
        </div>
        <div class="appBottom">
            <nut-button block @click="stepBtn">
                {{stepState === 3? '完成':'下一步'}}
            </nut-button>
        </div>
        <nut-datepicker :is-visible="isVisible" type="date" title="请选择日期" :is-show-chinese="false"
            @close="switchPicker('isVisible')" @choose="setChooseValue">
        </nut-datepicker>
        <!-- 设备类型弹窗 -->
        <nut-popup v-model="typeShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">设备类型</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in typeList" :key="index" @click="selectType(item,1)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
        <!-- 设备状态弹窗 -->
        <nut-popup v-model="stateShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">设备状态</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in stateList" :key="index" @click="selectType(item,2)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
        <!-- 联网方式弹窗 -->
        <nut-popup v-model="networkingShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">联网方式</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in networkingList" :key="index"
                    @click="selectType(item,3)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
        <!-- 所属泵房弹窗 -->
        <nut-popup v-model="pumpShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">所属泵房</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in pumpList" :key="index" @click="selectType(item,4)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
        <!-- 运行方式弹窗 -->
        <nut-popup v-model="runShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">运行方式</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in runList" :key="index" @click="selectType(item,5)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
        <!-- 品牌弹窗 -->
        <nut-popup v-model="brandShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">品牌</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in brandList" :key="index" @click="selectType(item,6)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
        <!-- 设备厂商弹窗 -->
        <nut-popup v-model="firmShow" position="bottom" round :style="{ height: '40%' }">
            <div class="popupTitle">
                <div class="left"></div>
                <div class="title">设备厂商</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem" v-for="(item, index) in firmList" :key="index" @click="selectType(item,7)">
                    {{item.name}}</div>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isVisible: false,
                typeShow: false,
                typeList: [
                    { id: 1, name: '类型1111' },
                    { id: 2, name: '类型2222' },
                    { id: 3, name: '类型3333' },
                    { id: 4, name: '类型4444' },
                    { id: 5, name: '类型5555' },
                    { id: 6, name: '类型6666' },
                    { id: 7, name: '类型7777' },
                    { id: 8, name: '类型8888' },
                    { id: 9, name: '类型9999' },
                ],
                stateShow: false,
                stateList: [
                    { id: 1, name: '状态1111' },
                    { id: 2, name: '状态2222' },
                    { id: 3, name: '状态3333' },
                    { id: 4, name: '状态4444' },
                ],
                networkingShow: false,
                networkingList: [
                    { id: 1, name: '联网方式11' },
                    { id: 2, name: '联网方式22' },
                    { id: 3, name: '联网方式33' },
                    { id: 4, name: '联网方式44' },
                ],
                accessShow: false,
                accessList: [
                    { id: 1, name: '接入协议11' },
                    { id: 2, name: '接入协议22' },
                    { id: 3, name: '接入协议33' },
                    { id: 4, name: '接入协议44' },
                ],
                pumpShow: false,
                pumpList: [
                    { id: 1, name: '泵房1111' },
                    { id: 2, name: '泵房2222' },
                    { id: 3, name: '泵房3333' },
                    { id: 4, name: '泵房4444' },
                ],
                runShow: false,
                runList: [
                    { id: 1, name: '运行方式11' },
                    { id: 2, name: '运行方式22' },
                    { id: 3, name: '运行方式33' },
                    { id: 4, name: '运行方式44' },
                ],
                brandShow: false,
                brandList: [
                    { id: 1, name: '品牌1111' },
                    { id: 2, name: '品牌2222' },
                    { id: 3, name: '品牌3333' },
                    { id: 4, name: '品牌4444' },
                ],
                firmShow: false,
                firmList: [
                    { id: 1, name: '厂商1111' },
                    { id: 2, name: '厂商2222' },
                    { id: 3, name: '厂商3333' },
                    { id: 4, name: '厂商4444' },
                ],
                pageTitle: '新增设备',
                stepsLineWidth: null,
                stepState: 1,
                form: {
                    deviceName: '',  //设备名称
                    deviceType: 0,  //设备类型
                    deviceState: 0,  //设备状态
                    networked: 0,  //联网方式
                    access: '',  //接入协议
                    peremptorily: 0,  //所属泵房
                    address: 0,  //所在位置
                    pump: [],  //泵组
                    annex: [],  //附件
                    devicePower: '',  //设备功率
                    specification: '',  //型号、规格
                    warranty: '',  //质保期
                    maximum: '',  //最大承受压力
                    voltage: '',  //电压
                    explicitly: 0,  //运行方式
                    rated: '',  //额定容量
                    higher_powered: '',  //额定输出功率
                    brand: 0,  //品牌
                    equipment: 0,  //设备厂商
                    time: '',  //采购时间
                    purchased: '',  //采购价格
                    contactName: '',  //联系人
                    contactPhone: '',  //联系电话
                }
            },
            mounted() {
                let qwe = window.innerWidth - 264
                let aa = qwe / 2
                this.stepsLineWidth = aa - 16
            },
            watch: {
                stepState(val) {
                    if (val == 1) {
                        this.pageTitle = '新增设备'
                    } else if (val == 2) {
                        this.pageTitle = '设备参数'
                    } else if (val == 3) {
                        this.pageTitle = '供应商'
                    }
                }
            },
            methods: {
                switchPicker(param) {
                    this[`${param}`] = !this[`${param}`];
                },
                setChooseValue(param) {
                    this.form.time = param[3];
                },
                back() {
                    window.history.go(-1);
                },
                goaddPump() {
                    window.location.href = './addPump.html'
                },
                selectType(data, val) {
                    if (val == 1) {
                        this.form.deviceType = data.name
                        this.typeShow = false
                    } else if (val == 2) {
                        this.form.deviceState = data.name
                        this.stateShow = false
                    } else if (val == 3) {
                        this.form.networked = data.name
                        this.networkingShow = false
                    } else if (val == 4) {
                        this.form.peremptorily = data.name
                        this.pumpShow = false
                    } else if (val == 5) {
                        this.form.explicitly = data.name
                        this.runShow = false
                    } else if (val == 6) {
                        this.form.brand = data.name
                        this.brandShow = false
                    } else if (val == 7) {
                        this.form.equipment = data.name
                        this.firmShow = false
                    }
                },
                stepBtn() {
                    let stepState = this.stepState
                    if (stepState == 1 || stepState == 2) {
                        // if (stepState == 1) {
                        //     if (this.form.deviceName == '' && this.form.access == '' && this.form.deviceType == 0 && this.form.deviceState == 0 && this.form.networked == 0 && this.form.deviceState == 0 && this.form.address == 0) {
                        //         alert('必填项不能为空')
                        //         return;
                        //     }
                        // }
                        this.stepState++
                    } else {
                        console.log('表单内容值', this.form)
                        window.history.go(-1);
                    }
                }
            }
        })
    </script>
</body>

</html>